<template>
  <div>
    <bread first="商品管理"
           second="商品分类"></bread>

    <el-card>
      <el-button @click="dialogFormVisible = true"
                 type="primary">添加分类</el-button>

      <!-- 树形表格组件 -->
      <zk-table border
                style="margin-top:20px"
                ref="table"
                sum-text="sum"
                index-text="#"
                :data="data1"
                :columns="columns"
                :show-index="true"
                :expand-type="false"
                :selection-type="false">
        <template slot="level"
                  scope="scope">
          <i v-if="!scope.row.cat_deleted"
             class="el-icon-success"></i>
          <i v-else
             class="el-icon-circle-close"></i>
        </template>
        <template slot="caozuo">
          <el-button type="primary"
                     icon="el-icon-edit">编辑</el-button>
          <el-button type="danger"
                     icon="el-icon-delete">删除</el-button>
        </template>

      </zk-table>
      <!-- 树形表格组件 -->

      <!-- 分页 -->
      <el-pagination style="margin-top:10px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="paramsObj.pagenum"
                     :page-sizes="[5, 10, 15,20]"
                     :page-size="paramsObj.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
      <!-- 分页 -->
    </el-card>

    <!--显示的 对话框 -->
    <el-dialog title="添加商品分类"
               :visible.sync="dialogFormVisible">
      <el-form :model="form"
               :rules="rules">
        <el-form-item label="分类名称"
                      prop="name"
                      :label-width="formLabelWidth">
          <el-input v-model="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级分类"
                      :label-width="formLabelWidth">
          <el-select v-model="form.region"
                     placeholder="请选择">
            <el-option label="区域一"
                       value="shanghai"></el-option>
            <el-option label="区域二"
                       value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
           
<script>
import { goodsCateApi } from '@/api'
export default {
  name: '',
  data () {
    return {
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      paramsObj: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      currentPage4: 4,
      props: {
        stripe: false,
        border: false,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false,
      },
      data1: [
        {
          name: 'Jack',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                  children: [
                    {
                      name: 'Ashley',
                      sex: 'female',
                      likes: ['football', 'basketball'],
                      score: 20,
                    },
                    {
                      name: 'Taki',
                      sex: 'male',
                      likes: ['football', 'basketball'],
                      score: 10,
                      children: [
                        {
                          name: 'Ashley',
                          sex: 'female',
                          likes: ['football', 'basketball'],
                          score: 20,
                        },
                        {
                          name: 'Taki',
                          sex: 'male',
                          likes: ['football', 'basketball'],
                          score: 10,
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
            },
          ],
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                },
              ],
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                },
              ],
            },
          ],
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
            },
          ],
        },
      ],
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '400px',
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'level',
          minWidth: '50px',
        },
        {
          label: '排序',
          prop: 'cat_level',
        },
        {
          label: '操作',
          minWidth: '200px',
          type: 'template',
          template: 'caozuo',
        },
      ],
      //对话框
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    };

  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.paramsObj.pagesize = val
      this.getUsers() //重新根据页面获取数据
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.paramsObj.pagenum = val
      this.getUsers() //重新根据页面获取数据
    },
    async getCate () {
      const res = await goodsCateApi(this.paramsObj)
      console.log(res, 666);
      this.data1 = res.data.data.result;
      // 获取总条数
      this.total = res.data.data.total

    }
  },
  created () {
    this.getCate()
  },

}
</script>
<style lang='less'  scoped>
</style>
